import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Table, Divider, Modal } from 'antd';

import Form from './components/SearchForm';
import Build from './components/Build';
import Video from '@/components/ReactVideoHLS';

import { checkInit } from '@/utils/util';


export interface IProps {
  dispatch?: Function,
  children?: React.ReactNode,
  loading: boolean,
  buttons?: Array<any>,
  list: {
    data: Array<any>,
    dataCnt: number
  },
  cond?: {
    pageSize: number,
  }
}


@connect(({ fireroom, loading, menu }) => ({
  cond: fireroom.cond || {},
  list: fireroom.list || {},
  loading: loading.effects['fireroom/queryPage'],
  buttons: menu.buttons,
}))
class Fireroom extends Component<IProps, any> {

  readonly state = {
    current: 1,
    visible: false, //摄像头查看
    show: false, // 管辖区域
    url: null,
    fireroomId: null
  }

  componentDidMount() {
    const { dispatch } = this.props;
    checkInit() ? dispatch({ type: `fireroom/initCond` }) : this.queryData({ pageNum: 1 });
  }

  private handleRange = v => {
    this.setState({ show: true, fireroomId: v.id })
  }

  private queryData = (params) => {
    const { dispatch } = this.props;

    dispatch({
      type: 'fireroom/queryPage',
      payload: params
    });
  }

  onShowSizeChange = (current, pageSize) => {
    const { dispatch, cond } = this.props;
    cond.pageSize = pageSize;
    this.setState({ current: 1 }, () => {
      dispatch({
        type: 'fireroom/updateCond',
        payload: cond
      })
    })
  }

  initCurrent = () => {
    this.setState({
      current: 1
    })
  };


  private handleSelectCancel = v => {
    const { dispatch } = this.props;
    dispatch({ type: 'fireroom/setBuildCond', payload: {} })
    this.setState({ show: false })
  }

  private handleCamera = (v) => {
    this.setState({ url: v, visible: true })
  }

  private handleCancel = () => {
    this.setState({ url: null, visible: false })
  }

  render() {
    const { list, buttons } = this.props;
    const { show, fireroomId, url, current, visible } = this.state;

    const { data = [], dataCnt } = list;

    const btnList = {};
    if (Array.isArray(buttons)) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      current,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: this.onShowSizeChange,
      onChange: (current) => {
        this.setState({
          current,
          isChangePage: true
        }, () => this.queryData({
          pageNum: current
        }));
      },
    };

    const columns = [{
      title: '消控室位置',
      dataIndex: 'name',
    }, {
      title: '责任人',
      dataIndex: 'manager',
    }, {
      title: '值班室电话',
      dataIndex: 'telephone',
    }, {
      title: '手机号',
      dataIndex: 'mobile',
    }, {
      title: '摄像头',
      dataIndex: 'cameraAddr',
      render: (text, record) => (
        record.isCamera ? <a onClick={this.handleCamera.bind(this, text)}>查看</a> : <span style={{ color: '#ccc' }}>查看</span>
      )
    }, {
      title: '操作', key: 'x', render: (record, text, index) => {
        return (
          <div style={{ display: 'flex' }}>
            {
              btnList['编辑'] ? <>
                <Link to={`/data/fireroom/${record.id}/update`}>编辑</Link>
                <Divider type="vertical" />
              </> : null
            }
            {
              <a onClick={this.handleRange.bind(this, record)}>管辖范围</a>
            }
          </div>
        )
      }
    }];

    const ans = Array.isArray(data) ? data.map((v, index) => ({
      ...v,
      ind: index + 1 < 10 ? `0${index + 1}` : index + 1,
    })) : []

    return (
      <>
        <Modal
          title={<span style={{ color: 'rgba(0, 0, 0, 0.9)', fontWeight: 400, fontSize: '20px' }}>管辖区域</span>}
          width={800}
          visible={show}
          onCancel={this.handleSelectCancel}
          destroyOnClose
          footer={null}
        >
          { fireroomId && <Build fireRoomId={fireroomId} isSelect={false}/> }
        </Modal>
        <Modal
          title="查看摄像头"
          visible={visible}
          footer={null}
          width={800}
          bodyStyle={{ height: '500px' }}
          onCancel={this.handleCancel}
        >
          {url && <Video url={url} />}
        </Modal>
        <Form current={current} initCurrent={this.initCurrent} new={!!btnList['新增']} />
        <Table
          columns={[{
            title: '序号',
            dataIndex: 'ind',
          }, ...columns]}
          pagination={pagination}
          dataSource={ans}
          loading={this.props.loading}
          bordered
          rowKey="id"
        />
      </>
    );
  }
}

export default Fireroom;
